



<!DOCTYPE html>
<html lang="zh-CN">
  <head><meta name="generator" content="Hexo 3.9.0">
    <title>列表渲染 — Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/v2/guide/list.html">
    <link rel="alternate" hreflang="es" href="https://es.vuejs.org/v2/guide/list.html">

    <meta property="og:type" content="article">
    <meta property="og:title" content="列表渲染 — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org/images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="列表渲染 — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="/vue2/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/vue2/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/vue2/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/vue2/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/vue2/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/vue2/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/vue2/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/vue2/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/vue2/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/vue2/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/vue2/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/vue2/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/vue2/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="/vue2/images/logo.svg">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/vue2/manifest.json">

    <!-- <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin> -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin> -->

    <!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet"> -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet"> -->

    <link href="//code.bdstatic.com/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- main page styles -->
    <link rel="stylesheet" href="/vue2/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/vue2/js/vue.js"></script>

    

    <script>
      Vue.config.productionTip = false
      window.PAGE_TYPE = "guide"
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>

    <!-- vimeo analytics -->
    <!-- <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script> -->
</head>
  <body class="docs">

    

    <div id="mobile-bar">
      <a class="menu-button"></a>
      <a class="logo" href="/"></a>
    </div>
    <div>
  <div id="v3-banner">
    <span class="hidden-sm">非官方文档，仅为个人学习使用，查看官方文档请移步</span><a href="https://cn.vuejs.org/" target="_blank">这里</a>。
  </div>

  <header id="header">
    <a id="logo" href="/vue2/">
      <img src="/vue2/images/logo.svg" alt="vue logo">
      <span>Vue.js</span>
    </a>
    <ul id="nav">
      <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input" aria-label="搜索">
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link current">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>文档</h4></li>
    <li>
      <ul>
        <li><a href="/vue2/v2/guide/" class="nav-link current">教程</a></li>
        <li><a href="/vue2/v2/api/" class="nav-link">API</a></li>
        <li><a href="/vue2/v2/style-guide/" class="nav-link">风格指南</a></li>
        <li><a href="/vue2/v2/examples/" class="nav-link">示例</a></li>
        <li><a href="/vue2/v2/cookbook/" class="nav-link">Cookbook</a></li>
      </ul>
    </li>
    <li><h4>视频教程</h4></li>
    <li>
      <ul>
        <li>
          <a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue Mastery (英文)
          </a>
        </li>
        <li>
          <a href="https://vueschool.io/?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=Navbar%20Dropdown" class="nav-link" target="_blank" rel="sponsored noopener">
            Vue School (英文)
          </a>
        </li>
        <!-- start: special logic for cn -->
        <li>
          <a href="https://learning.dcloud.io/" class="nav-link" target="_blank" rel="sponsored noopener">
            DCloud 视频教程
          </a>
        </li>
        <!-- end: special logic for cn -->
      </ul>
    </li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank" rel="noopener">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank" rel="noopener">聊天室</a></li>
      <li><a href="https://events.vuejs.org/meetups/" class="nav-link" target="_blank" rel="noopener">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank" rel="noopener">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank" rel="noopener">周刊</a></li>
      <li><a href="https://github.com/vuejs/vue/projects/6" class="nav-link" target="_blank" rel="noopener">Roadmap</a></li>
      <li><a href="https://events.vuejs.org/" class="nav-link" target="_blank" rel="noopener">活动</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank" rel="noopener">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank" rel="noopener">工作</a></li>
      <li><a href="https://dev.to/t/vue" class="nav-link" target="_blank" rel="noopener">DEV 社区</a></li>
    </ul></li>
  </ul>
</li>

<li>
  <a href="/vue2/v2/guide/team.html" class="nav-link team">团队</a>
</li>
<li class="nav-dropdown-container resources">
  <a href="#" class="nav-link">资源列表</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="/vue2/resources/partners.html" class="nav-link">合作伙伴</a></li>
    <li><a href="/vue2/resources/themes.html" class="nav-link">主题</a></li>
    <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank" rel="noopener">Awesome Vue</a></li>
    <li><a href="https://awesomejs.dev/for/vue/" class="nav-link" target="_blank" rel="noopener">浏览和 Vue 相关的包</a></li>
  </ul>
</li>

<!-- <li>
  <a href="/vue2/partners" class="nav-link ">Partners</a>
</li> -->
<li class="nav-dropdown-container support-vue">
  <a href="/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
    <li><a href="/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
    <!-- start: special logic for cn -->
    <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" rel="noopener" class="nav-link">贴纸</a></li>
    <li><a href="https://osholic.com/?utm_source=vue&utm_medium=dropdown" rel="noopener" class="nav-link">周边</a></li>
    <!-- end: special logic for cn -->
    <li><a href="https://vue.threadless.com" target="_blank" rel="noopener" class="nav-link">T 恤商店</a></li>
  </ul>
</li>

<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/v2/guide/list.html" class="nav-link">English</a></li>
    <li><a href="https://jp.vuejs.org/v2/guide/list.html" class="nav-link">日本語</a></li>
    <li><a href="https://ru.vuejs.org/v2/guide/list.html" class="nav-link">Русский</a></li>
    <li><a href="https://kr.vuejs.org/v2/guide/list.html" class="nav-link">한국어</a></li>
    <li><a href="https://br.vuejs.org/v2/guide/list.html" class="nav-link">Português</a></li>
    <li><a href="https://fr.vuejs.org/v2/guide/list.html" class="nav-link">Français</a></li>
    <li><a href="https://vi.vuejs.org/v2/guide/list.html" class="nav-link">Tiếng Việt</a></li>
    <li><a href="https://es.vuejs.org/v2/guide/list.html" class="nav-link">Español</a></li>
    <li><a href="https://docs.vuejs.id/v2/guide/list.html" class="nav-link">Bahasa Indonesia</a></li>
  </ul>
</li>

<!-- start: special logic for cn -->
<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>
<!-- end: special logic for cn -->

    </ul>
  </header>
</div>

    
      <div id="main" class="fix-sidebar">
        
  

<div class="sidebar">
  <div class="sidebar-inner">
    
    <div class="list">
      <div id="sidebar-sponsors-special">
  <div class="main-sponsor">
    <!-- start: special logic for cn -->
    <span>特别赞助商</span>
    <div>
    <a href="http://www.dcloud.io/?hmsr=vuejsorg&hmpl=&hmcu=&hmkw=&hmci=" target="_blank" rel="sponsored noopener" class="logo">
      <img id="s-dcloud" alt="dcloud">
      <script>
      (function(){
        var el = document.getElementById("s-dcloud");
        var adImg = null;
        var altImg = "/vue2/images/dcloud2.png";
        var img = "/vue2/images/dcloud1.png";
        el.src = adImg || (altImg && Math.random() >= 0.5 ? altImg : img);
      })()
      </script>
    </a>
    </div>
    <div>
    <a href="https://authing.cn/welcome?from=vuejs" target="_blank" rel="sponsored noopener" class="logo">
      <img id="s-authing" alt="authing">
      <script>
      (function(){
        var el = document.getElementById("s-authing");
        var adImg = null;
        var altImg = null;
        var img = "/vue2/images/authing.svg";
        el.src = adImg || (altImg && Math.random() >= 0.5 ? altImg : img);
      })()
      </script>
    </a>
    </div>
    <div>
    <a href="https://qingfuwu.cn?utm_campaign=TR_eSJH7nqW&utm_content=&utm_medium=Web&utm_source=CH_53OxwryD&utm_term=" target="_blank" rel="sponsored noopener" class="logo">
      <img id="s-qingfuwu" alt="qingfuwu">
      <script>
      (function(){
        var el = document.getElementById("s-qingfuwu");
        var adImg = null;
        var altImg = null;
        var img = "/vue2/images/qingfuwu.svg";
        el.src = adImg || (altImg && Math.random() >= 0.5 ? altImg : img);
      })()
      </script>
    </a>
    </div>
    <!-- end: special logic for cn -->
  </div>
</div>
<!--
<div id="sidebar-sponsors-platinum-left">
  <div class="main-sponsor">
    <span>白金赞助商</span>
    <div>
    <a href="https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/vueschool.png" alt="VueSchool">
    </a>
    <a href="https://vehikl.com/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/vehikl.png" alt="Vehikl">
    </a>
    <a href="https://retool.com/?utm_source=sponsor&utm_campaign=vue" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/retool.png" alt="Retool">
    </a>
    <a href="https://passionatepeople.io/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/passionate_people.png" alt="Passionate People">
    </a>
    <a href="https://www.storyblok.com" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/storyblok.png" alt="Storyblok">
    </a>
    <a href="https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/ionic.png" alt="Ionic">
    </a>
    <a href="https://nuxtjs.org/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/nuxt.png" alt="Nuxt">
    </a>
    </div>
  </div>
  <a class="become-backer" href="/vue2/support-vuejs">
    成为赞助者
  </a>
</div>

-->

      
        <h2>
          
          教程
          
            <select class="version-select">
              <option value="v3">3.x</option>
              <option value="SELF" selected>2.x</option>
              <option value="v1">1.0</option>
              <option value="012">0.12</option>
              <option value="011">0.11</option>
            </select>
          
        </h2>
        <ul class="menu-root">
  
    
    
      
        <li><h3>基础</h3></li>
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/installation.html" class="sidebar-link">安装</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/index.html" class="sidebar-link">介绍</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/instance.html" class="sidebar-link">Vue 实例</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/syntax.html" class="sidebar-link">模板语法</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/computed.html" class="sidebar-link">计算属性和侦听器</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/class-and-style.html" class="sidebar-link">Class 与 Style 绑定</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/conditional.html" class="sidebar-link">条件渲染</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/list.html" class="sidebar-link current">列表渲染</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/events.html" class="sidebar-link">事件处理</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/forms.html" class="sidebar-link">表单输入绑定</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components.html" class="sidebar-link">组件基础</a>
    </li>
  
    
    
      
      
        <li><h3>深入了解组件</h3></li>
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-registration.html" class="sidebar-link">组件注册</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-props.html" class="sidebar-link">Prop</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-custom-events.html" class="sidebar-link">自定义事件</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-slots.html" class="sidebar-link">插槽</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-dynamic-async.html" class="sidebar-link">动态组件 & 异步组件</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/components-edge-cases.html" class="sidebar-link">处理边界情况</a>
    </li>
  
    
    
      
      
      
        <li><h3>过渡 & 动画</h3></li>
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/transitions.html" class="sidebar-link">进入/离开 & 列表过渡</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/transitioning-state.html" class="sidebar-link">状态过渡</a>
    </li>
  
    
    
      
      
      
      
        <li><h3>可复用性 & 组合</h3></li>
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/mixins.html" class="sidebar-link">混入</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/custom-directive.html" class="sidebar-link">自定义指令</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/render-function.html" class="sidebar-link">渲染函数 & JSX</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/plugins.html" class="sidebar-link">插件</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/filters.html" class="sidebar-link">过滤器</a>
    </li>
  
    
    
      
      
      
      
      
        <li><h3>工具</h3></li>
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/single-file-components.html" class="sidebar-link">单文件组件</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/testing.html" class="sidebar-link">测试</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/typescript.html" class="sidebar-link">TypeScript 支持</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/deployment.html" class="sidebar-link">生产环境部署</a>
    </li>
  
    
    
      
      
      
      
      
      
        <li><h3>规模化</h3></li>
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/routing.html" class="sidebar-link">路由</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/state-management.html" class="sidebar-link">状态管理</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/ssr.html" class="sidebar-link">服务端渲染</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/security.html" class="sidebar-link">安全</a>
    </li>
  
    
    
      
      
      
      
      
      
      
        <li><h3>内在</h3></li>
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/reactivity.html" class="sidebar-link">深入响应式原理</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
        <li><h3>迁移</h3></li>
      
      
    
    <li>
      <a href="/vue2/v2/guide/migration.html" class="sidebar-link">从 Vue 1.x 迁移</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/migration-vue-router.html" class="sidebar-link">从 Vue Router 0.7.x 迁移</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/migration-vuex.html" class="sidebar-link">从 Vuex 0.6.x 迁移到 1.0</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
        <li><h3>更多</h3></li>
      
    
    <li>
      <a href="/vue2/v2/guide/comparison.html" class="sidebar-link">对比其他框架</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/join.html" class="sidebar-link">加入 Vue.js 社区</a>
    </li>
  
    
    
      
      
      
      
      
      
      
      
      
    
    <li>
      <a href="/vue2/v2/guide/team.html" class="sidebar-link">认识团队</a>
    </li>
  
</ul>

      
    </div>
  </div>
</div>
<!--

<div id="sidebar-sponsors-platinum-right">
  <div class="main-sponsor">
    <span>白金赞助商</span>
    <div>
    <a href="https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/vueschool.png" alt="VueSchool">
    </a>
    <a href="https://vehikl.com/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/vehikl.png" alt="Vehikl">
    </a>
    <a href="https://retool.com/?utm_source=sponsor&utm_campaign=vue" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/retool.png" alt="Retool">
    </a>
    <a href="https://passionatepeople.io/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/passionate_people.png" alt="Passionate People">
    </a>
    <a href="https://www.storyblok.com" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/storyblok.png" alt="Storyblok">
    </a>
    <a href="https://ionicframework.com/vue?utm_source=partner&utm_medium=referral&utm_campaign=vuesponsorship&utm_content=vuedocs" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/ionic.png" alt="Ionic">
    </a>
    <a href="https://nuxtjs.org/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/vue2/images/nuxt.png" alt="Nuxt">
    </a>
    </div>
  </div>
  <a class="become-backer" href="/vue2/support-vuejs">
    成为赞助者
  </a>
</div>


-->


<div class="content guide with-sidebar list-guide">
  <p class="tip warning v3-warning">
    您在浏览的是 v2.x 及更早版本的文档。v3.x 的文档<a href="https://wangyubina.github.io/vue3/">在这里</a>。
  </p>

  
    
      
<div id="ad">
  <!-- start: special logic for cn -->
  <div class="wwads-cn wwads-vertical" data-id="53" style="max-width: 200px"></div>
  <script type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>
  <!-- end: special logic for cn -->
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CEBDT27Y&placement=vuejsorg"
    id="_carbonads_js"
  ></script> -->
</div>


    
  
  
    <h1>列表渲染</h1>
  

  <!-- start: special logic for cn -->
  <!-- start: special logic for cn -->
<!-- <div class="ad-pagetop">
  <a href="http://www.vueshop.com.cn/index.php?http_referer=vuejs" target="_blank" rel="noopener noreferrer">
    <span class="name">VUEshop</span>
    <span class="description">中国免费商城系统 - 搜豹商城系统 - 免费50小时 Vue 视频教程</span>
    <span class="action">立即查看 &gt;</span>
  </a>
</div> -->
<!-- end: special logic for cn -->

  <!-- end: special logic for cn -->

  
    <h2 id="用-v-for-把一个数组对应为一组元素"><a href="#用-v-for-把一个数组对应为一组元素" class="headerlink" title="用 v-for 把一个数组对应为一组元素"></a>用 <code>v-for</code> 把一个数组对应为一组元素</h2><div class="vueschool"><a href="https://learning.dcloud.io/#/?vid=9" target="_blank" rel="sponsored noopener" title="Vue.js 教程 - 列表渲染">观看本节视频讲解</a></div>

<p>我们可以用 <code>v-for</code> 指令基于一个数组来渲染一个列表。<code>v-for</code> 指令需要使用 <code>item in items</code> 形式的特殊语法，其中 <code>items</code> 是源数据数组，而 <code>item</code> 则是被迭代的数组元素的<strong>别名</strong>。</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-1"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.message"</span>&gt;</span>
    &#123;&#123; item.message &#125;&#125;
  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> example1 = <span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#example-1'</span>,
  <span class="hljs-attr">data</span>: &#123;
    <span class="hljs-attr">items</span>: [
      &#123; <span class="hljs-attr">message</span>: <span class="hljs-string">'Foo'</span> &#125;,
      &#123; <span class="hljs-attr">message</span>: <span class="hljs-string">'Bar'</span> &#125;
    ]
  &#125;
&#125;)</code></pre>
<p>结果：</p>

<ul id="example-1" class="demo">
  <li v-for="item in items" :key="item.message">
    {{item.message}}
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  watch: {
    items: function () {
      smoothScroll.animateScroll(document.querySelector('#example-1'))
    }
  }
})
</script>

<p>在 <code>v-for</code> 块中，我们可以访问所有父作用域的 property。<code>v-for</code> 还支持一个可选的第二个参数，即当前项的索引。</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-2"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in items"</span>&gt;</span>
    &#123;&#123; parentMessage &#125;&#125; - &#123;&#123; index &#125;&#125; - &#123;&#123; item.message &#125;&#125;
  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> example2 = <span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#example-2'</span>,
  <span class="hljs-attr">data</span>: &#123;
    <span class="hljs-attr">parentMessage</span>: <span class="hljs-string">'Parent'</span>,
    <span class="hljs-attr">items</span>: [
      &#123; <span class="hljs-attr">message</span>: <span class="hljs-string">'Foo'</span> &#125;,
      &#123; <span class="hljs-attr">message</span>: <span class="hljs-string">'Bar'</span> &#125;
    ]
  &#125;
&#125;)</code></pre>
<p>结果：</p>

<ul id="example-2" class="demo">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  watch: {
    items: function () {
      smoothScroll.animateScroll(document.querySelector('#example-2'))
    }
  }
})
</script>

<p>你也可以用 <code>of</code> 替代 <code>in</code> 作为分隔符，因为它更接近 JavaScript 迭代器的语法：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item of items"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<h2 id="在-v-for-里使用对象"><a href="#在-v-for-里使用对象" class="headerlink" title="在 v-for 里使用对象"></a>在 <code>v-for</code> 里使用对象</h2><p>你也可以用 <code>v-for</code> 来遍历一个对象的 property。</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"v-for-object"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"demo"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"value in object"</span>&gt;</span>
    &#123;&#123; value &#125;&#125;
  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#v-for-object'</span>,
  <span class="hljs-attr">data</span>: &#123;
    <span class="hljs-attr">object</span>: &#123;
      <span class="hljs-attr">title</span>: <span class="hljs-string">'How to do lists in Vue'</span>,
      <span class="hljs-attr">author</span>: <span class="hljs-string">'Jane Doe'</span>,
      <span class="hljs-attr">publishedAt</span>: <span class="hljs-string">'2016-04-10'</span>
    &#125;
  &#125;
&#125;)</code></pre>
<p>结果：</p>

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
<script>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>

<p>你也可以提供第二个的参数为 property 名称 (也就是键名)：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(value, name) in object"</span>&gt;</span>
  &#123;&#123; name &#125;&#125;: &#123;&#123; value &#125;&#125;
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>

<div id="v-for-object-value-name" class="demo">
  <div v-for="(value, name) in object">
    {{ name }}: {{ value }}
  </div>
</div>
<script>
new Vue({
  el: '#v-for-object-value-name',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>

<p>还可以用第三个参数作为索引：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(value, name, index) in object"</span>&gt;</span>
  &#123;&#123; index &#125;&#125;. &#123;&#123; name &#125;&#125;: &#123;&#123; value &#125;&#125;
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>

<div id="v-for-object-value-name-index" class="demo">
  <div v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </div>
</div>
<script>
new Vue({
  el: '#v-for-object-value-name-index',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>

<p class="tip">在遍历对象时，会按 <code>Object.keys()</code> 的结果遍历，但是<strong>不能</strong>保证它的结果在不同的 JavaScript 引擎下都一致。</p>

<h2 id="维护状态"><a href="#维护状态" class="headerlink" title="维护状态"></a>维护状态</h2><p>当 Vue 正在更新使用 <code>v-for</code> 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 <code>track-by=&quot;$index&quot;</code>。</p>
<p>这个默认的模式是高效的，但是<strong>只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出</strong>。</p>
<p>为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 <code>key</code> attribute：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">v-bind:key</span>=<span class="hljs-string">"item.id"</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- 内容 --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<p>建议尽可能在使用 <code>v-for</code> 时提供 <code>key</code> attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。</p>
<p>因为它是 Vue 识别节点的一个通用机制，<code>key</code> 并不仅与 <code>v-for</code> 特别关联。后面我们将在指南中看到，它还具有其它用途。</p>
<p class="tip">不要使用对象或数组之类的非基本类型值作为 <code>v-for</code> 的 <code>key</code>。请用字符串或数值类型的值。</p>

<p>更多 <code>key</code> attribute 的细节用法请移步至 <a href="https://cn.vuejs.org/v2/api/#key"><code>key</code> 的 API 文档</a>。</p>
<h2 id="数组更新检测"><a href="#数组更新检测" class="headerlink" title="数组更新检测"></a>数组更新检测</h2><h3 id="变更方法"><a href="#变更方法" class="headerlink" title="变更方法"></a>变更方法</h3><p>Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：</p>
<ul>
<li><code>push()</code></li>
<li><code>pop()</code></li>
<li><code>shift()</code></li>
<li><code>unshift()</code></li>
<li><code>splice()</code></li>
<li><code>sort()</code></li>
<li><code>reverse()</code></li>
</ul>
<p>你可以打开控制台，然后对前面例子的 <code>items</code> 数组尝试调用变更方法。比如 <code>example1.items.push({ message: &#39;Baz&#39; })</code>。</p>
<h3 id="替换数组"><a href="#替换数组" class="headerlink" title="替换数组"></a>替换数组</h3><p>变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 <code>filter()</code>、<code>concat()</code> 和 <code>slice()</code>。它们不会变更原始数组，而<strong>总是返回一个新数组</strong>。当使用非变更方法时，可以用新数组替换旧数组：</p>
<pre><code class="hljs js">example1.items = example1.items.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) </span>&#123;
  <span class="hljs-keyword">return</span> item.message.match(<span class="hljs-regexp">/Foo/</span>)
&#125;)</code></pre>
<p>你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。</p>
<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><p>由于 JavaScript 的限制，Vue <strong>不能检测</strong>数组和对象的变化。<a href="reactivity.html#检测变化的注意事项">深入响应式原理</a>中有相关的讨论。</p>
<h2 id="显示过滤-排序后的结果"><a href="#显示过滤-排序后的结果" class="headerlink" title="显示过滤/排序后的结果"></a>显示过滤/排序后的结果</h2><p>有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。</p>
<p>例如：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"n in evenNumbers"</span>&gt;</span>&#123;&#123; n &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></code></pre>
<pre><code class="hljs js">data: &#123;
  <span class="hljs-attr">numbers</span>: [ <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span> ]
&#125;,
<span class="hljs-attr">computed</span>: &#123;
  <span class="hljs-attr">evenNumbers</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.numbers.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">number</span>) </span>&#123;
      <span class="hljs-keyword">return</span> number % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>
    &#125;)
  &#125;
&#125;</code></pre>
<p>在计算属性不适用的情况下 (例如，在嵌套 <code>v-for</code> 循环中) 你可以使用一个方法：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"set in sets"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"n in even(set)"</span>&gt;</span>&#123;&#123; n &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
<pre><code class="hljs js">data: &#123;
  <span class="hljs-attr">sets</span>: [[ <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span> ], [<span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">10</span>]]
&#125;,
<span class="hljs-attr">methods</span>: &#123;
  <span class="hljs-attr">even</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">numbers</span>) </span>&#123;
    <span class="hljs-keyword">return</span> numbers.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">number</span>) </span>&#123;
      <span class="hljs-keyword">return</span> number % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>
    &#125;)
  &#125;
&#125;</code></pre>
<h2 id="在-v-for-里使用值范围"><a href="#在-v-for-里使用值范围" class="headerlink" title="在 v-for 里使用值范围"></a>在 <code>v-for</code> 里使用值范围</h2><p><code>v-for</code> 也可以接受整数。在这种情况下，它会把模板重复对应次数。</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"n in 10"</span>&gt;</span>&#123;&#123; n &#125;&#125; <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<p>结果：</p>

<div id="range" class="demo">
  <span v-for="n in 10">{{ n }} </span>
</div>
<script>
  new Vue({ el: '#range' })
</script>

<h2 id="在-lt-template-gt-上使用-v-for"><a href="#在-lt-template-gt-上使用-v-for" class="headerlink" title="在 &lt;template&gt; 上使用 v-for"></a>在 <code>&lt;template&gt;</code> 上使用 <code>v-for</code></h2><p>类似于 <code>v-if</code>，你也可以利用带有 <code>v-for</code> 的 <code>&lt;template&gt;</code> 来循环渲染一段包含多个元素的内容。比如：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>&#123;&#123; item.msg &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"presentation"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
<h2 id="v-for-与-v-if-一同使用"><a href="#v-for-与-v-if-一同使用" class="headerlink" title="v-for 与 v-if 一同使用"></a><code>v-for</code> 与 <code>v-if</code> 一同使用</h2><p class="tip">注意我们<strong>不</strong>推荐在同一元素上使用 <code>v-if</code> 和 <code>v-for</code>。更多细节可查阅<a href="/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要">风格指南</a>。</p>

<p>当它们处于同一节点，<code>v-for</code> 的优先级比 <code>v-if</code> 更高，这意味着 <code>v-if</code> 将分别重复运行于每个 <code>v-for</code> 循环中。当你只想为<em>部分</em>项渲染节点时，这种优先级的机制会十分有用，如下：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"todo in todos"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!todo.isComplete"</span>&gt;</span>
  &#123;&#123; todo &#125;&#125;
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></code></pre>
<p>上面的代码将只渲染未完成的 todo。</p>
<p>而如果你的目的是有条件地跳过循环的执行，那么可以将 <code>v-if</code> 置于外层元素 (或 <a href="conditional.html#在-lt-template-gt-中配合-v-if-条件渲染一整组"><code>&lt;template&gt;</code></a>) 上。如：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"todos.length"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"todo in todos"</span>&gt;</span>
    &#123;&#123; todo &#125;&#125;
  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-else</span>&gt;</span>No todos left!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
<h2 id="在组件上使用-v-for"><a href="#在组件上使用-v-for" class="headerlink" title="在组件上使用 v-for"></a>在组件上使用 <code>v-for</code></h2><blockquote>
<p>这部分内容假定你已经了解<a href="components.html">组件</a>相关知识。你也完全可以先跳过它，以后再回来查看。</p>
</blockquote>
<p>在自定义组件上，你可以像在任何普通元素上一样使用 <code>v-for</code>。</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.id"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span></code></pre>
<blockquote>
<p>2.2.0+ 的版本里，当在组件上使用 <code>v-for</code> 时，<code>key</code> 现在是必须的。</p>
</blockquote>
<p>然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>
  <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in items"</span>
  <span class="hljs-attr">v-bind:item</span>=<span class="hljs-string">"item"</span>
  <span class="hljs-attr">v-bind:index</span>=<span class="hljs-string">"index"</span>
  <span class="hljs-attr">v-bind:key</span>=<span class="hljs-string">"item.id"</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</span>&gt;</span></code></pre>
<p>不自动将 <code>item</code> 注入到组件里的原因是，这会使得组件与 <code>v-for</code> 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。</p>
<p>下面是一个简单的 todo 列表的完整例子：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"todo-list-example"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">v-on:submit.prevent</span>=<span class="hljs-string">"addNewTodo"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"new-todo"</span>&gt;</span>Add a todo<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"newTodoText"</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"new-todo"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"E.g. Feed the cat"</span>
    &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>
      <span class="hljs-attr">is</span>=<span class="hljs-string">"todo-item"</span>
      <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(todo, index) in todos"</span>
      <span class="hljs-attr">v-bind:key</span>=<span class="hljs-string">"todo.id"</span>
      <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"todo.title"</span>
      <span class="hljs-attr">v-on:remove</span>=<span class="hljs-string">"todos.splice(index, 1)"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<p class="tip">注意这里的 <code>is=&quot;todo-item&quot;</code> attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 <code>&lt;ul&gt;</code> 元素内只有 <code>&lt;li&gt;</code> 元素会被看作有效内容。这样做实现的效果与 <code>&lt;todo-item&gt;</code> 相同，但是可以避开一些潜在的浏览器解析错误。查看 <a href="components.html#解析-DOM-模板时的注意事项">DOM 模板解析说明</a> 来了解更多信息。</p>

<pre><code class="hljs js">Vue.component(<span class="hljs-string">'todo-item'</span>, &#123;
  <span class="hljs-attr">template</span>: <span class="hljs-string">'\
    &lt;li&gt;\
      &#123;&#123; title &#125;&#125;\
      &lt;button v-on:click="$emit(\'remove\')"&gt;Remove&lt;/button&gt;\
    &lt;/li&gt;\
  '</span>,
  <span class="hljs-attr">props</span>: [<span class="hljs-string">'title'</span>]
&#125;)

<span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#todo-list-example'</span>,
  <span class="hljs-attr">data</span>: &#123;
    <span class="hljs-attr">newTodoText</span>: <span class="hljs-string">''</span>,
    <span class="hljs-attr">todos</span>: [
      &#123;
        <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">title</span>: <span class="hljs-string">'Do the dishes'</span>,
      &#125;,
      &#123;
        <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,
        <span class="hljs-attr">title</span>: <span class="hljs-string">'Take out the trash'</span>,
      &#125;,
      &#123;
        <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,
        <span class="hljs-attr">title</span>: <span class="hljs-string">'Mow the lawn'</span>
      &#125;
    ],
    <span class="hljs-attr">nextTodoId</span>: <span class="hljs-number">4</span>
  &#125;,
  <span class="hljs-attr">methods</span>: &#123;
    <span class="hljs-attr">addNewTodo</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;
      <span class="hljs-keyword">this</span>.todos.push(&#123;
        <span class="hljs-attr">id</span>: <span class="hljs-keyword">this</span>.nextTodoId++,
        <span class="hljs-attr">title</span>: <span class="hljs-keyword">this</span>.newTodoText
      &#125;)
      <span class="hljs-keyword">this</span>.newTodoText = <span class="hljs-string">''</span>
    &#125;
  &#125;
&#125;)</code></pre>

<div id="todo-list-example" class="demo">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
    <button>Add</button>
  </form>
  <ul>
    <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
  </ul>
</div>
<script>
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
</script>


  
  
    <div class="guide-links">
      
      
        <span>← <a href="/vue2/v2/guide/conditional.html">条件渲染</a></span>
      
      
      
        <span style="float: right;"><a href="/vue2/v2/guide/events.html">事件处理</a> →</span>
      
    </div>
  
  <div class="footer">
      <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div id="bsa-native"></div>
<script>
_bsa.init('custom', 'CKYD62QM', 'placement:vuejsorg',
  {
    target: '#bsa-native',
    template: '<a class="native-box" href="##statlink##"><div class="native-sponsor">Sponsor</div><div class="native-text"><strong>##company##</strong> — ##description##</div></a>'
  }
);
</script>


    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/guide/list.md" rel="noopener" target="_blank">
      在 GitHub 上编辑此页！
    </a>
    <!-- Deployed on
    <a href="https://url.netlify.com/HJ8X2mxP8" rel="noopener" target="_blank">
      Netlify
    </a>. -->
  </div>
</div>

      </div>
      <script src="/vue2/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/vue2/js/css.escape.js"></script>
    <script src="/vue2/js/common.js"></script>

    <!-- search -->
    <link href="//code.bdstatic.com/npm/docsearch.js@1.5.0/dist/cdn/docsearch.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/vue2/css/search.css">
    <script src="//code.bdstatic.com/npm/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] },
      autocompleteOptions: { hint: false, appendTo: 'body'}
      })
    })
    </script>
  </body>
</html>
